<template>
  <div class="statusSteps">
    <el-steps :active="active-1"  finish-status="success" align-center>
      <el-step v-for="item in data" :key="item.active" :title="item.title" :description="item.des"></el-step>
    </el-steps>
  </div>
</template>


<script>
  export default {
    name: "StatusSteps",
    props: {
      status: {
        type: Number,
        default: 0
      },
      active: {
        type: Number,
        default: 0,
      }
    },
    created(){
      // console.log(this.status,this.active);
      // 根据状态获取描述信息
      if(this.status && this.active){
         let des = null;
         this.statusList.forEach(item=>{
           if(item.value === this.status){
             des = item.label;
           }
         });
         this.data.forEach(item=>{
           if(item.active === this.active){
             item.des = '状态：'+des;
           }
         })
      }
      // console.log(this.data)
    },
    data(){
      return {
        data: [
          { active : 1, title: '件量预测', des: ''},
          { active : 2, title: '用工评估', des: ''},
          { active : 3, title: '零工预测', des: ''},
          { active : 4, title: '方案审核', des: ''},
          { active : 5, title: '用工完结', des: ''},
        ],
        statusList: [
          //件量预测
          { value: 1, label: '待审核' },
          { value: 2, label: '审核驳回' },
          //用工评估
          { value: 3, label: '待处理' },
          { value: 4, label: '待审核' },
          { value: 5, label: '审核驳回' },
          // 零工预测
          { value: 6, label: '待处理' },
          { value: 7, label: '待审核' },
          { value: 8, label: '审核驳回' },
          //方案审核
          { value: 9, label: '待审核' },
          //用工完结
          { value: 10, label: '待处理' },
          { value: 11, label: '已完成' },
        ],
      }
    },
    computed: {
    },
    methods:{}
  };
</script>
